<html>

<head>
	<style>
		button {
			padding: 16px;
			background: rgb(253, 253, 253);
			border: solid 1px #ebebeb;
			cursor: pointer;
			border-radius: 10px;
			font-weight: bold;
			font-size: 16px;
			color: #565656;
			margin: 5px;
			border: solid 3px #565656;
		}

		button:hover {
			background: white;
			border: solid 3px #222222;
		}

		.label {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: +100000000;
			background: rgb(253, 253, 253, 0.5);
			padding: 5px;
			font-size: 20px;
			color: #565656;
			text-align: center;
		}

		#keybind {
			font-family: sans-serif;
			background: white;
			width: 100px;
			align-items: center;
			display: flex;
			justify-content: center;
			border: solid 1px black;
			font-weight: bold;
			margin-left: 10px;
		}
	</style>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
		integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
		crossorigin="" />
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet" />
	<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
	<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
</head>

<body style="width: 100%; height: 100%; margin: 0">
	<div id="library-container" style="display: flex; flex-direction: row; height: 100%; width: 100%">

	</div>

	<div style="
				position: absolute;
				top: 40px;
				z-index: 1000;
				width: 100%;
				margin: auto 0;
				display: flex;
				justify-content: center;
			">
		<button id="select">Select</button>
		<button id="point">Point</button>
		<button id="linestring">LineString</button>
		<button id="polygon">Polygon</button>
		<button id="freehand">Freehand</button>
		<button id="circle">Circle</button>
		<button id="rectangle">Rectangle</button>
		<button id="angled-rectangle">Angled Rectangle</button>
		<button id="sector">Sector</button>
		<button id="sensor">Sensor</button>
		<button id="clear">Clear</button>
		<div id="keybind"></div>
	</div>
	<script src="./bundle.js"></script>
</body>

</html>